<template>
	<div class="product_con">
		<el-row>
			<el-col class="title-col" :span="24"
				><div class="grid-content bg-purple-dark product-title">
					<div><span class="iconfont">&#xe618;</span>添加商品</div>
				</div></el-col
			>
		</el-row>
		<div style="margin: 20px;"></div>
		<el-form
			:model="brandValue"
			label-width="120px"
			:rules="rules"
			ref="ruleForm"
			class="demo-ruleForm"
			label-position="left"
		>
			<el-form-item label="品牌名称:" prop="name">
				<el-input v-model="brandValue.name"></el-input>
			</el-form-item>
			<el-form-item label='品牌首字母:'>
                <el-input v-model='brandValue.first_letter'></el-input>
            </el-form-item>
			<el-form-item label='品牌LOGO:' prop='logo'>
                <el-input v-model='brandValue.logo'></el-input>
            </el-form-item>
            <el-form-item label='品牌专区大图:'>
                <el-input v-model='brandValue.big_pic'></el-input>
            </el-form-item>
            <el-form-item label='品牌故事:'>
                <el-input v-model='brandValue.brand_story'></el-input>
            </el-form-item>
			<el-form-item label="排序:">
				<el-input v-model="brandValue.sort" style="width:100px;"></el-input>
			</el-form-item>
			<el-form-item label="是否显示:">
				<el-radio-group v-model="brandValue.show_status">
					<el-radio :label="1">是</el-radio>
					<el-radio :label="0">否</el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item label="品牌制造商:">
				<el-radio-group v-model="brandValue.factory_status">
					<el-radio :label="1">是</el-radio>
					<el-radio :label="0">否</el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="submitForm('ruleForm')"
					>修改</el-button
				>
			</el-form-item>
		</el-form>
	</div>
</template>
<script>
import { editBrand,fetchBrandOne } from "@/api/product";
export default {
	name: "brandUpdate",
	data() {
		return {
			labelPosition: "left",
			brandValue: {
				
			},
			rules: {
				//验证规则
				name: [{ required: true, message: "请输入品牌名称", trigger: "blur" }],
                logo:[{required:true,message:'请填写品牌logo图片地址链接',trigger:'blur'}]
			}
		};
	},
	methods: {
		submitForm(formName) {
			//validate 是一个函数，功能是对表单进行验证
			//参数是回调函数， 回调函数中的参数 valid 的值可以是 true（验证通过） 或false（验证失败）
			//console.log(this.$refs[formName]);//element ui 封装的 表单组件
			console.log(this.$refs[formName]);
			this.$refs[formName].validate((valid) => {
				console.log(valid);
				if (valid) {
					console.log("可以提交表单");
					//调用 后台接口,修改品牌数据
					editBrand(this.brandValue).then((res) => {
						console.log(res);
						if (res.status == 200) {
							this.$message({
								message: "商品品牌信息修改成功~",
								type: "success",
							});
							this.$router.push("/pms/brand");
						} else {
							console.log("验证失败");
							return false;
						}
					});
				}
			});
		},
		async getBrandOne(){
			let res=await fetchBrandOne({id:this.$route.params.id})
			console.log(res.data);
			this.brandValue=res.data
		}
	},
	mounted(){
		this.getBrandOne();
	}
};
</script>
<style scoped lang="scss">
.product_con {
	margin: 10px;
	.title-col {
		border: 1px solid #ebeef5;
		margin-bottom: 10px;
		padding: 20px;
	}
}
</style>
